<script lang='ts' setup>
import { searchService } from '@/services/search.service';
import { onMounted, ref } from 'vue';
import MarkdownIt from '@/components/Markdown.vue';
import { appRef } from '@/models/app.ref';
import { SiderMenuEnum } from '@/models/@types';
import { DatabaseEnum, OnlineSearchInfo, OnlineSearchModelEnumOption } from '@/models/online-search';
import { bingService } from '@/services/bing.service';
import { workService } from '@/services/work.service';
import { arxivService } from '@/services/arxiv.service';


const isSend = ref(false);
const textarea = ref('');
const result = ref('');

const menus = ref([]);
const currMenu = ref({} as OnlineSearchInfo);
onMounted(() => {
  init();
})

function init(): void {
  menus.value = appRef.onlineSearch.menus;
  currMenu.value = appRef.onlineSearch?.currMenu;
  textarea.value = currMenu.value?.question;
  result.value = currMenu.value?.answer;
}

function onAdd(e: { type: SiderMenuEnum, parent?: string }): void {
  const { type, parent } = e
  appRef.onlineSearch.add(type, parent);
  init();
}

function onItem(uid: string): void {
  console.log('onItem', uid);
  appRef.onlineSearch.setCurrKey(uid);
  init();
}
function onEdit(param: { uid: string, label: string }): void {
  const { uid, label } = param;
  appRef.onlineSearch.edit(uid, label);
}

let isChunking = ref(false);
function onSend(): void {
  if (isChunking.value) return;
  isSend.value = true;
  const { database } = currMenu.value
  if (database === DatabaseEnum.Bing) {
    bingService.search(textarea.value).then(res => {
      res = 'bing search results: \n' + res+ "\n The above information was obtained from the Internet and should be used to answer the following message in Chinese, \n each part of content must be followed by a referenced of the source url in markdown format:\n" + textarea.value;
      result.value = res;
      searchService.message(res, chunk, end)
    })
  } else if (database === DatabaseEnum.Arxiv) {
    arxivService.search(textarea.value).then(res => {
      res = 'arxiv search results:\n ' + res + "\n The above information was obtained from the Internet and should be used to answer the following message in Chinese, \n each part of content must be followed by a referenced of the source url in markdown format:\n" + textarea.value;
      result.value = res;
      searchService.message(res, chunk, end)
    })
  } else {
    searchService.search(textarea.value, chunk, end)
  }
}

function chunk(text: string): void {
  result.value = text;
  isSend.value = false;
  isChunking.value = true;
}

function end(text: string): void {
  appRef.onlineSearch.update(currMenu.value.uid, textarea.value, text);
  result.value = text;
  isChunking.value = false;
}

</script>
<template>
  <div class="index">
    <a-layout style="height: 100%;">
      <Sider :menus="menus" :default-uid="currMenu?.uid" @add="onAdd"
        @clear="() => { appRef.onlineSearch.clear(); init() }" @click-item="onItem"
        @edit="($event) => { onEdit($event); init() }"
        @remove="($event) => { appRef.onlineSearch.remove($event); init() }" />
      <a-layout>
        <div class="main flex-c" v-if="currMenu?.uid">
          <div class="bottom flex">
            <a-select v-model="currMenu.database" style="max-width:200px" placeholder="选择数据库">
              <a-option v-for="item in OnlineSearchModelEnumOption" :value="item.key" :label="item.name"></a-option>
            </a-select>
            <a-input class="input" v-model="textarea" placeholder="输入你想要搜索的关键词 ..." allow-clear :disabled="isSend"
              @keydown.enter="onSend" />
            <a-button class="send" type="primary" :disabled="!textarea || isChunking" @click.stop="onSend"
              :loading="isSend">
              <template #icon><icon-search style="width:40px;" /> </template>
            </a-button>
          </div>
          <a-spin dot class="flex-c spin" :loading="isSend" tip="搜索中">
            <MarkdownIt class="content" :source="result || '搜索总结的内容会显示在这里'"></MarkdownIt>
            <!-- <div class="content" v-html="result"> </div> -->
          </a-spin>
        </div>
        <Explanation v-else />
      </a-layout>
    </a-layout>
  </div>
</template>
<style lang='scss' scoped>
.index {
  height: 100%;

  .main {
    width: 95%;
    height: 100%;
    justify-content: center;
    max-width: 1270px;
    margin: 0 auto;
    padding: 20px 0;

    .spin {
      width: 100%;
      flex: 1;
      overflow: hidden;
    }

    .content {
      width: calc(100% - 40px);
      margin: 20px;
      box-shadow: 0 0 20px var(--color-border-3);
      border-radius: 10px;
      padding: 30px;
      line-height: 20px;
      overflow: auto;
      flex: 1;
      word-break: break-all;
    }

    .bottom {
      box-shadow: 0 0 20px var(--color-border-3);
      width: calc(100% - 40px);
      padding: 10px 20px;


      .input {
        height: 100%;
        margin-right: 10px;
        background: none;

        input {
          &:focus {
            border: none !important;
          }
        }

      }


    }
  }
}
</style>